.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-center-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-column-between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flex-row {
  display: flex;
  flex-direction: row;

}


.flex-row-center {
  display: flex;
  align-items: center;

}

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}

.flex-1-0-0 {
  flex: 1 0 0;
}

$max-rows: 5;
$max-columns: 5;


@for $cols from 0 through $max-columns {
  .grid-#{$cols} {
    display: grid;
    grid-template-columns: repeat(#{$cols}, 1fr);
  }
  .br-#{$cols} {
    border-radius: #{$cols}rpx;
  }
}




